<template>
  <div class="bottom flexC AlignItemsC">
    <!-- 需要展示的列表 -->
    <ul class="flex JustifyContentSB table_bodys textC">
      <li class="flex JustifyContentSA AlignItemsC cursor flex1" @click="clone.nbcz = true">
        <p class="font_20">内部处置</p>
        <p class="font_28 ">
          <span>{{ this.homeInfo | bottomNbczFun }}</span>
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
      <li class="flex JustifyContentSA AlignItemsC cursor flex1" style="margin: 0 1.25rem;" @click="clone.xtcz = true">
        <p class="font_20">协同处置</p>
        <p class="font_28 ">
          <span>{{ this.homeInfo | bottomXtczFun }}</span>
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
      <li class="flex JustifyContentSA AlignItemsC cursor flex1" @click="clone.yqcz = true">
        <p class="font_20">逾期处置</p>
        <p class="font_28 ">
          <span>{{ this.homeInfo | bottomYqczFun }}</span>
          <span class="font_20" style="color: #A2ADBF;">起</span>
        </p>
      </li>
    </ul>
    <!-- 列表滚动 -->
    <div class="lists cursor" @mouseenter="enter()" @mouseleave="leave()">
      <div id="demo" ref="doscroll" :class="{ scrollAnimation: animate == true }">
        <ul v-for="(item, index) in rollingList" :key="'list' + index" class="flex textC table_body font_s16 colorF ">
          <li class="flex flex1 JustifyContentC AlignItemsC">
            <p><img src="../../assets/img/home/101.png" alt="" /></p>
            <p class="font_s14" style="color: #72F6F8;">{{ item.jglx }}</p>
          </li>
          <li><p style="width:0.125rem; height:3.1875rem;margin-top: 1rem;background:rgba(84,91,102,1);"></p></li>
          <li class="flex flex7 JustifyContentC AlignItemsC" style="color: #72F6F8;">
            <p>{{ item.bjgdx }}</p>
          </li>
          <li class="flexC flex7 JustifyContentC AlignItemsC">
            <p>{{ item.jgqrnrbs }}</p>
          </li>
          <li class="flex8">
            <div class="flex JustifyContentSB" style="color: #9FA9B7;margin-right: 2.5rem">
              <p class="font_s16">
                <span>发现</span>
                <span class="font_s14" style="display: block;">{{ item.fxsj }}</span>
              </p>
              <p class="font_s16">
                <span>{{ item.pdczr | pdFun }}</span>
                <span class="font_s14" style="display: block;">{{ item.pdsj }}</span>
              </p>
              <p class="font_s16">
                <span>{{ item.czczr | czFun }}</span>
                <span class="font_s14" style="display: block;">{{ item.czsj }}</span>
              </p>
              <p class="font_s16">完成</p>
            </div>
            <img :src="item.czzt | czztType" alt="" style="margin-right: 1.5rem" />
          </li>
        </ul>
      </div>
    </div>
    <YiBaoPolygon v-if="clone.nbcz" @hidden="hiddenClone(0)"><InternalDisposal></InternalDisposal></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.xtcz" @hidden="hiddenClone(1)"><CooperativeDisposal></CooperativeDisposal></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.yqcz" @hidden="hiddenClone(2)"><ExpectedDisposal></ExpectedDisposal></YiBaoPolygon>
  </div>
</template>
<script>
import InternalDisposal from './bottomComponents/InternalDisposal'
import YiBaoPolygon from '@/components/YiBaoPolygon'
import CooperativeDisposal from './bottomComponents/CooperativeDisposal'
import ExpectedDisposal from './bottomComponents/ExpectedDisposal'
import eventBus from '../../eventBus'

export default {
  name: 'Hbottom',
  components: { ExpectedDisposal, CooperativeDisposal, InternalDisposal, YiBaoPolygon },
  data () {
    return {
      homeInfo: {},
      rollingList: [],
      animate: false,
      timer: null,
      clone: {
        nbcz: false,
        xtcz: false,
        yqcz: false
      },
      handleType: 1,
      imgArr: ['../../assets/img/home/202.png', '../../assets/img/home/203.png', '../../assets/img/home/204.png', '../../assets/img/home/205.png'],
      imgUrl: require('../../assets/img/home/202.png')
    }
  },
  filters: {
    pdFun (value) {
      if (value === null) {
        return '派单'
      } else {
        return '派单(' + value + ')'
      }
    },
    czFun (value) {
      if (value === null) {
        return '处置'
      } else {
        return '处置(' + value + ')'
      }
    },
    czztType (value) {
      var status = parseInt(value)
      if (status === 1) {
        return require('../../assets/img/home/202.png')
      } else if (status === 2) {
        return require('../../assets/img/home/203.png')
      } else if (status === 3) {
        return require('../../assets/img/home/204.png')
      } else if (status === 4) {
        return require('../../assets/img/home/205.png')
      } else {
        return require('../../assets/img/home/202.png')
      }
    },
    bottomNbczFun (value) {
      return parseInt(value.nbczs)
    },
    bottomXtczFun (value) {
      return parseInt(value.xtczs)
    },
    bottomYqczFun (value) {
      return parseInt(value.yqczs)
    }
  },
  methods: {
    homeInfoFun: function () {
      eventBus.$on('homeInfoFun', message => {
        this.homeInfo = message
      })
    },
    homeHandele () {
      this.$http.post(this.$api.Bottom.rollingList, ' ', true).then(result => {
        if (result.data.result !== null || undefined || '') {
          this.rollingList = result.data.result
          this.timer = setInterval(this.scroll, 1500)
        }
      })
    },
    hiddenClone (index) {
      if (index === 0) {
        this.clone.nbcz = false
      } else if (index === 1) {
        this.clone.xtcz = false
      } else if (index === 2) {
        this.clone.yqcz = false
      }
    },
    scroll () {
      // 获取DOM节点元素
      let doscroll = this.$refs.doscroll
      // 为节点元素添加/改变 margin-top 属性的值
      if (this.rollingList.length <= 2) {
        doscroll.style.marginTop = '0rem'
        this.animate = !this.animate
      } else {
        doscroll.style.marginTop = '-6.4rem'
        this.animate = !this.animate
        let that = this
        setTimeout(() => {
          if (that.rollingList !== null || undefined) {
            // 将列表中第一条数据添加到列表末尾
            that.rollingList.push(that.rollingList[0])
            // 删除列表中第一条数据
            that.rollingList.shift()
            // 将节点元素 margin-top 属性值重置为0
            doscroll.style.marginTop = '0rem'
            // 防止列表滚动动画回滚
            that.animate = !that.animate
          }
        }, 1000)
      }
    },

    enter () {
      clearInterval(this.timer)
      this.timer = null
    },
    leave () {
      this.timer = setInterval(this.scroll, 1500)
    }
  },
  created () {
    this.homeInfoFun()
  },
  mounted () {
    this.homeHandele()
  }
}
</script>
<style lang="scss" scoped>
.bottom {
  width: 100%;
  height: 22vh;
  padding: 0 1rem;
  box-sizing: border-box;
  margin-top: 0.425rem;
  .lists {
    width: 100%;
    overflow: hidden;
    .scrollAnimation {
      transition: all 1.8s;
    }
  }
  .table_body {
    margin-bottom: 0.75rem;
    font-weight: 400;
    li {
      background: rgba(27, 37, 67, 1);
    }
  }
  .table_bodys {
    width: 100%;
    margin-bottom: 0.35rem;
    li {
      height: 3.5vh;
      background: url(../../assets/img/home/103.png) no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
    }
    li:hover {
      color: #72f6f8;
      background: url(../../assets/img/home/104.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
